<template>
  <div>
    <p>路径查询：</p>
    <b-form inline>
      <b-input-group prepend="起点" class="mb-2 mr-sm-2 mb-sm-0" size="sm">
        <b-input
          id="source"
          placeholder="请输入起点"
          size="sm"
          @focus="getSource"
          v-model.trim="source"
        ></b-input>
      </b-input-group>
      <b-input-group prepend="终点" class="mb-2 mr-sm-2 mb-sm-0" size="sm">
        <b-input
          id="target"
          placeholder="请输入终点"
          size="sm"
          @focus="getTarget"
          v-model.trim="target"
        ></b-input>
      </b-input-group>
      <b-button variant="primary" size="sm" @click="getPath">查询</b-button>
    </b-form>
  </div>
</template>

<script>
import * as turf from "@turf/turf";
export default {
  name: "PathQuery",
  props: ["map"],
  data() {
    return {
      pathmap: null,
      text: "",
      source: "",
      target: "",
      paths: null,
      pathsLayer: null,
      pointLayer: null,
    };
  },
  created() {
    this.pathmap = this.map;
  },
  methods: {
    getSource() {
      const map = this.pathmap;
      const source = this.source;
      if (source == "") {
        map.once("mouseup", (e) => {
          let latlng = e.latlng;
          this.source = "[" + latlng.lng + "," + latlng.lat + "]";
          alert("经纬度为：[" + latlng.lng + "," + latlng.lat + "]");
        });
      }
    },
    getTarget() {
      const map = this.pathmap;
      const target = this.target;
      if (target == "") {
        map.once("mouseup", (e) => {
          let latlng = e.latlng;
          this.target = "[" + latlng.lng + "," + latlng.lat + "]";
          alert("经纬度为：[" + latlng.lng + "," + latlng.lat + "]");
        });
      }
    },
    getPath() {
      const map = this.pathmap;
      if (this.source == "" || this.target == "") {
        alert("请输入正确的起始点");
      } else {
        //查询经纬度之间最短路径
        const source = this.source.match(/\d+(.\d+)?/g);
        const target = this.target.match(/\d+(.\d+)?/g);
        this.$axios
          .get("http://127.0.0.1/path/LatLon", {
            params: {
              source: source,
              target: target,
            },
          })
          .then((res) => {
            if (this.pathsLayer != null) {
              this.pathsLayer.clearLayers();
            }
            this.paths = res.data;
            let layerArr = new Array();
            for (let i = 0; i < this.paths.length; i++) {
              layerArr[i] = L.geoJSON(this.paths[i].geojson, {
                style: function (feature) {
                  return { color: "#00ff40", weight: 7, opacity: 0.8 };
                },
              });
            }
            this.pathsLayer = L.layerGroup(layerArr);
            map.addLayer(this.pathsLayer);

            if (this.pointLayer != null) {
              this.pointLayer.clearLayers();
            }
            let layers = [];
            let sourceMarker = L.marker([source[1], source[0]]);
            let targetMarker = L.marker([target[1], target[0]]);
            layers.push(sourceMarker, targetMarker);
            this.pointLayer = L.layerGroup(layers);
            map.addLayer(this.pointLayer);
          });
      }
    },
  },
  watch: {
    map: function (newVal) {
      this.pathmap = newVal;
    },
  },
};
</script>

<style scoped>
button {
  margin: 0 2px;
}
#route {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>